<template>
  <input type="file" @change="onFileChange" />
  <input type="file" @change="onImgChange" />
  <button
    @click="addImageToPDF"
  >
    hecheng
  </button>
</template>
<script>
// 在组件中导入pdf-lib
import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib';
import { saveAs } from 'file-saver';

let pdfFile = "";
let imgFile = "";

export default {
  methods: {
    onFileChange(event) {
      pdfFile = event.target.files[0];
    },
    onImgChange(event) {
      imgFile = event.target.files[0];
    },
    async addImageToPDF() {
      // 从服务器或本地加载PDF文件
      const existingPdfBytes = await this.loadPdfFile(pdfFile);

      // 创建一个PDF文档
      const pdfDoc = await PDFDocument.load(existingPdfBytes);

      // 从服务器或本地加载图片
      const imageBytes = await this.loadImageFile(imgFile);

      // 将图片添加到PDF页面的指定位置
      const page = pdfDoc.getPages()[0]; // 获取第一页
      const { width, height } = page.getSize();
      const image = await pdfDoc.embedPng(imageBytes);
      page.drawImage(image, {
        x: 100, // 指定X轴位置
        y:100, // 指定Y轴位置
        width: 100, // 指定宽度
        height: 100, // 指定高度
      });

      // 生成修改后的PDF
      const modifiedPdfBytes = await pdfDoc.save();

      // 在这里你可以将修改后的PDF保存到服务器或下载到本地
      // 例如，你可以使用FileSaver.js将文件保存到本地
      // 另外，确保在组件中定义loadPdfFile和loadImageFile方法

      // 保存PDF到本地
      this.saveFile(modifiedPdfBytes, "modified_file.pdf");
    },

    async loadPdfFile(filePath) {
      // 实现加载PDF文件的逻辑，例如从服务器获取文件字节
      // 返回一个Promise，解析为文件字节
      const reader = new FileReader();
      reader.readAsArrayBuffer(filePath);
      await new Promise((resolve) => {
        reader.onload = resolve;
      });
      return reader.result;
    },

    async loadImageFile(filePath) {
      // 实现加载图片文件的逻辑，例如从服务器获取图片字节
      // 返回一个Promise，解析为图片字节
      // 实现加载PDF文件的逻辑，例如从服务器获取文件字节
      // 返回一个Promise，解析为文件字节
      const reader = new FileReader();
      reader.readAsArrayBuffer(filePath);
      await new Promise((resolve) => {
        reader.onload = resolve;
      });
      return reader.result;
    },

    saveFile(data, fileName='11.pdf') {
        // 使用FileSaver.js文件保存生成的文档
        const blob = new Blob([data], {
            type: 'application/pdf',
        });
        saveAs(blob, fileName);
      // 使用FileSaver.js等工具保存文件到本地
    },
  },
};
</script>